<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>layer 弹层 - layui</title>
    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 100px;
      }
      #photos li {
        float: left;
        margin: 0 1px 1px;
      }
      #photos img {
        max-height: 38px;
      }
    </style>
  </head>
  <body>
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-primary" lay-on="test">Alert</button>
      <button class="layui-btn" lay-on="test2">Confirm</button>
      <button class="layui-btn" lay-on="test3">Msg</button>
      <button class="layui-btn" lay-on="test5">Page</button>
      <button class="layui-btn" lay-on="test6">Iframe</button>
      <button class="layui-btn" lay-on="testLoading">Loading</button>
      <button class="layui-btn" lay-on="test4">Tips</button>
      <button class="layui-btn" lay-on="test7">Prompt</button>
      <button class="layui-btn" lay-on="test8">Tab</button>
      <button class="layui-btn" lay-on="test9">Photo</button>
      <button class="layui-btn" lay-on="test10">Drawer</button>
      <button class="layui-btn" lay-on="testTime">自动关闭</button>
      <a
        href="https://layui.dev/docs/2/layer/"
        target="_blank"
        class="layui-btn"
        >更多例子</a
      >
    </div>

    <div id="test11111" style="display: none; padding: 16px">
      content 指向放置在页面的一段隐藏元素
    </div>

    <hr />
    <br />

    <div class="layui-list">
      <ul class="layui-row" id="photos">
        <li class="list">
          <img src="https://unpkg.com/outeres/demo/1.jpg" alt="123" />
        </li>
        <li class="list"><img src="https://unpkg.com/outeres/demo/2.jpg" /></li>
      </ul>
    </div>

    <script>
      var LAYUI_GLOBAL = {
        // path: '../src/',
        // layerPath: '../release/layer/src/'
      };
    </script>

    <script src="./assets/dist/layui.js"></script>

    <!-- layer 独立版调试 -->
    <script
      src1="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"
    ></script>
    <script src1="../release/layer/src/layer.js"></script>

    <script>
      var runTest = (run, $, layer) => {
        if (!run) return;

        var timer = setInterval(() => {
          //location.reload();
        }, 1000);

        layer.alert(123);

        $.ajax({
          url: './all.html',
          beforeSend: () => {
            //layer.ready(function(){
            //layer.load();
            //});
          },
          success: () => {
            return;
            layer.closeAll('loading', () => {
              setTimeout(() => {
                if ($('.layui-layer-loading').length) {
                  console.error('layer close 异常');
                  clearInterval(timer);
                }
              }, 200);
            });
          },
        });
      };
      window.jQuery && runTest(1, window.jQuery, window.layer);

      layui.use(['layer', 'util'], (layer, util) => {
        var $ = layui.jquery;
        var util = layui.util;
        //return

        var index = layer.msg('Hello World');
        //layer.close(index);
        //runTest(1, $, layer);

        // 触发事件
        util.on('lay-on', {
          test: () => {
            var icon = -1;
            (function changeIcon() {
              var index = layer.alert(
                'Hi，你好！ 点击确认更换图标',
                {
                  icon: icon,
                  shadeClose: true,
                  title: icon === -1 ? 'Alert' : 'icon: ' + icon,
                },
                changeIcon,
              );
              if (icon++ > 6) {
                layer.close(index);
                icon = -1;
              }
            })();
          },
          test2: () => {
            layer.confirm(
              '一个询问层的测试示例？',
              {
                btn: ['确定', '关闭'], //按钮
              },
              () => {
                layer.msg('第一个回调', { icon: 1 });
              },
              () => {
                layer.msg('第二个回调', {
                  time: 20000, //20s后自动关闭
                  btn: ['明白了', '知道了'],
                });
              },
            );
          },
          test3: () => {
            !0
              ? layer.msg('一个常用消息框')
              : layer.msg('一个常用消息框', { closeBtn: 0, time: 0, icon: 16 });
          },
          test4: function () {
            layer.tips('Hi，我是一个小提示', this, { tips: 1 });
          },
          test5: () => {
            layer.open({
              title: '自定义页面层',
              type: 1,
              skin: 'layui-layer-border',
              area: ['1000px', '580px'],
              content: $('#test11111'),
              maxmin: true,
              shade: false,
              minStack: false, // 最小化不堆叠在左下角
              id: 'page-1', // 定义 ID，防止重复弹出
              min: (layero, index) => {
                layer.msg('阻止了默认的最小化');
                layer.style(index, { top: 'auto', bottom: 0 });
                return false;
              },
            });
          },
          test6: () => {
            layer.open({
              type: 2,
              content: 'https://www.aliyun.com/activity?userCode=ap0255is',
              area: ['375px', '500px'],
              id: 'iframe-1',
              hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层
              maxmin: true,
            });
          },
          testLoading: () => {
            layer.load(0, {
              time: 5 * 1000,
              //content: '123'
            });
          },
          test7: () => {
            layer.prompt(
              { title: '输入任何口令，并确认', formType: 1 },
              (pass, index) => {
                layer.close(index);
                layer.prompt(
                  { title: '随便写点啥，并确认', formType: 2 },
                  (text, index) => {
                    layer.close(index);
                    layer.msg(
                      '演示完毕！您的口令：' +
                        util.escape(pass) +
                        '<br>您最后写下了：' +
                        util.escape(text),
                    );
                  },
                );
              },
            );
          },
          test8: () => {
            layer.tab({
              area: ['600px', '300px'],
              tab: [
                {
                  title: 'TAB1',
                  content: '内容1',
                },
                {
                  title: 'TAB2',
                  content: '内容2',
                },
                {
                  title: 'TAB3',
                  content: '内容3',
                },
              ],
            });
          },
          test9: () => {
            layer.photos({
              photos: {
                data: [
                  {
                    src: 'https://unpkg.com/outeres/demo/layer.png',
                  },
                ],
              },
              hideFooter: true, // 是否隐藏图片底部栏（v2.8.0 新增）
            });
          },
          testTime: () => {
            layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
              time: 5 * 1000,
              success: function (layero, index) {
                var timeNum = this.time / 1000,
                  setText = (start) => {
                    layer.title(
                      (start ? timeNum : --timeNum) + ' 秒后关闭',
                      index,
                    );
                  };
                setText(!0);
                this.timer = setInterval(setText, 1000);
                if (timeNum <= 0) clearInterval(this.timer);
              },
              end: function () {
                clearInterval(this.timer);
              },
            });
          },
          test10: () => {
            layer.open({
              title: 'drawer',
              type: 1,
              offset: 'b',
              anim: 'slideUp', // 从下往上
              area: ['100%', '160px'],
              shade: 0.1,
              shadeClose: true,
              content: $('#test11111'),
              maxmin: true,
            });
          },
        });

        // 相册层
        layer.photos({
          photos: '#photos', // $('#photos')
          // toolbar: false,
          // footer: false
        });

        //动态追加
        $('#photos').append(
          '<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>',
        );
      });
    </script>
  </body>
</html>
